<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="vm">
        姓：<input type="text" v-model="firstName"></br>
        名：<input type="text" v-model="lastName"></br>
        全名：<span>{{fullName}}</span> </br>
        全名：<span>{{fullName}}</span> </br>
        全名：<span>{{fullName}}</span> </br>
        全名：<span>{{fullName}}</span> </br>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue在启动时产生生产环境提示
        
        var vm = new Vue({
            el: '#vm',
            data: {
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName:{
                    //当有人读取fullName时，get就会被调用。且返回值叫做fullName的值
                    //get什么时候用？初次读取fullName的时候；所依赖的数据发生改变时
                    get(){
                        // console.log('被调用的次数');
                        return this.firstName + '_'+ this.lastName;
                    },
                    //当fullName被修改时调用
                    set(value){
                        // console.log('set',value);
                        const arr = value.split('_');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }

                }
            }
           
        })
    </script>
</body>

</html>